<template>
  <div class="order-detail">
    <div class="detail-header">
      <h2>订单详情</h2>
      <el-button @click="goBack">返回订单列表</el-button>
    </div>

    <div class="detail-content">
      <!-- 订单状态 -->
      <div class="status-section">
        <div class="status-header">
          <el-steps :active="getStatusStep(order.status)" finish-status="success">
            <el-step title="提交订单" :description="order.createTime"></el-step>
            <el-step title="支付订单" :description="order.payTime || '待支付'"></el-step>
            <el-step title="等待服务" :description="order.appointmentTime"></el-step>
            <el-step title="服务完成" :description="order.completeTime || '待完成'"></el-step>
          </el-steps>
        </div>
      </div>

      <!-- 订单信息 -->
      <el-card class="detail-card">
        <template #header>
          <div class="card-header">
            <span>订单信息</span>
            <el-tag :type="getStatusType(order.status)">{{ getStatusText(order.status) }}</el-tag>
          </div>
        </template>
        <div class="info-list">
          <div class="info-item">
            <span class="label">订单编号：</span>
            <span class="value">{{ order.orderNumber }}</span>
          </div>
          <div class="info-item">
            <span class="label">创建时间：</span>
            <span class="value">{{ order.createTime }}</span>
          </div>
          <div class="info-item">
            <span class="label">支付时间：</span>
            <span class="value">{{ order.payTime || '未支付' }}</span>
          </div>
          <div class="info-item">
            <span class="label">支付方式：</span>
            <span class="value">{{ order.paymentMethod || '未支付' }}</span>
          </div>
        </div>
      </el-card>

      <!-- 服务信息 -->
      <el-card class="detail-card">
        <template #header>
          <div class="card-header">
            <span>服务信息</span>
          </div>
        </template>
        <div class="service-info">
          <img :src="order.serviceImage" :alt="order.serviceTitle" class="service-image">
          <div class="service-details">
            <h3>{{ order.serviceTitle }}</h3>
            <p class="service-description">{{ order.serviceDescription }}</p>
            <div class="service-meta">
              <div class="meta-item">
                <i class="el-icon-time"></i>
                <span>预约时间：{{ order.appointmentTime }}</span>
              </div>
              <div class="meta-item">
                <i class="el-icon-location"></i>
                <span>服务地点：{{ order.location }}</span>
              </div>
            </div>
          </div>
          <div class="service-price">
            <span class="price-label">服务价格</span>
            <span class="price-value">¥{{ order.amount }}</span>
          </div>
        </div>
      </el-card>

      <!-- 宠物信息 -->
      <el-card class="detail-card">
        <template #header>
          <div class="card-header">
            <span>宠物信息</span>
          </div>
        </template>
        <div class="info-list">
          <div class="info-item">
            <span class="label">宠物类型：</span>
            <span class="value">{{ order.petType }}</span>
          </div>
          <div class="info-item">
            <span class="label">宠物品种：</span>
            <span class="value">{{ order.petBreed }}</span>
          </div>
          <div class="info-item">
            <span class="label">宠物年龄：</span>
            <span class="value">{{ order.petAge }}岁</span>
          </div>
          <div class="info-item">
            <span class="label">宠物体重：</span>
            <span class="value">{{ order.petWeight }}kg</span>
          </div>
        </div>
      </el-card>

      <!-- 联系人信息 -->
      <el-card class="detail-card">
        <template #header>
          <div class="card-header">
            <span>联系人信息</span>
          </div>
        </template>
        <div class="info-list">
          <div class="info-item">
            <span class="label">联系人：</span>
            <span class="value">{{ order.contactName }}</span>
          </div>
          <div class="info-item">
            <span class="label">联系电话：</span>
            <span class="value">{{ order.contactPhone }}</span>
          </div>
          <div class="info-item" v-if="order.location === 'home'">
            <span class="label">服务地址：</span>
            <span class="value">{{ order.address }}</span>
          </div>
        </div>
      </el-card>

      <!-- 订单操作 -->
      <div class="order-actions">
        <template v-if="order.status === 'unpaid'">
          <el-button type="primary" @click="handlePay">立即支付</el-button>
          <el-button @click="handleCancel">取消订单</el-button>
        </template>
        <template v-if="order.status === 'pending'">
          <el-button type="primary" @click="handleReschedule">改期</el-button>
          <el-button @click="handleCancel">取消订单</el-button>
        </template>
        <template v-if="order.status === 'completed'">
          <el-button type="primary" @click="handleReview">评价服务</el-button>
          <el-button @click="handleReOrder">再次预约</el-button>
        </template>
        <template v-if="order.status === 'cancelled'">
          <el-button @click="handleDelete">删除订单</el-button>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OrderDetail',
  data() {
    return {
      order: {}
    }
  },
  methods: {
    getStatusStep(status) {
      const steps = {
        unpaid: 1,
        pending: 2,
        completed: 3,
        cancelled: 0
      }
      return steps[status] || 0
    },
    getStatusType(status) {
      const types = {
        unpaid: 'warning',
        pending: 'primary',
        completed: 'success',
        cancelled: 'info'
      }
      return types[status] || 'info'
    },
    getStatusText(status) {
      const texts = {
        unpaid: '待支付',
        pending: '待服务',
        completed: '已完成',
        cancelled: '已取消'
      }
      return texts[status] || status
    },
    goBack() {
      this.$router.push('/orders')
    },
    handlePay() {
      this.$router.push(`/payment/${this.order.id}`)
    },
    async handleCancel() {
      try {
        await this.$confirm('确定要取消该订单吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        // 调用取消订单API
        // await this.$http.post(`/api/orders/${this.order.id}/cancel`)
        this.$message.success('订单已取消')
        this.getOrderDetail()
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('取消订单失败')
        }
      }
    },
    handleReschedule() {
      this.$router.push(`/appointment/${this.order.id}/reschedule`)
    },
    handleReview() {
      this.$router.push(`/review/${this.order.id}`)
    },
    handleReOrder() {
      this.$router.push(`/service/${this.order.serviceId}`)
    },
    async handleDelete() {
      try {
        await this.$confirm('确定要删除该订单吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        // 调用删除订单API
        // await this.$http.delete(`/api/orders/${this.order.id}`)
        this.$message.success('订单已删除')
        this.$router.push('/orders')
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('删除订单失败')
        }
      }
    },
    async getOrderDetail() {
      try {
        // 调用获取订单详情API
        // const response = await this.$http.get(`/api/orders/${this.$route.params.id}`)
        // this.order = response.data
      } catch (error) {
        this.$message.error('获取订单详情失败')
        this.$router.push('/orders')
      }
    }
  },
  created() {
  // 从路由参数中获取订单数据
  const orderData = this.$route.query.orderData;
  if (orderData) {
    this.order = JSON.parse(orderData); // 解析订单数据
  } else {
    // 如果没有传递数据，可以显示错误或跳回订单列表页
    this.$message.error('订单数据未找到');
    this.$router.push('/orders');
  }
}
}
</script>

<style scoped>
.order-detail {
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 64px;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.detail-header h2 {
  font-size: 28px;
  color: #333;
  margin: 0;
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.status-section {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.detail-card {
  margin-bottom: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-list {
  display: grid;
  gap: 15px;
}

.info-item {
  display: flex;
  align-items: center;
}

.info-item .label {
  width: 100px;
  color: #666;
}

.info-item .value {
  color: #333;
}

.service-info {
  display: flex;
  gap: 20px;
}

.service-image {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
}

.service-details {
  flex: 1;
}

.service-details h3 {
  margin: 0 0 10px;
  font-size: 20px;
  color: #333;
}

.service-description {
  color: #666;
  margin-bottom: 15px;
}

.service-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.meta-item {
  display: flex;
  align-items: center;
  color: #666;
}

.meta-item i {
  margin-right: 8px;
}

.service-price {
  text-align: right;
  padding-left: 20px;
  border-left: 1px solid #eee;
}

.price-label {
  display: block;
  color: #666;
  margin-bottom: 5px;
}

.price-value {
  font-size: 28px;
  color: #f56c6c;
  font-weight: bold;
}

.order-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.order-actions .el-button {
  min-width: 120px;
}
</style> 